<template>
	<view class="app-mine">
		<view class="top" :style="{backgroundImage: 'url(/static/imgs/mine-bg01.png)'}">
			<view class="top-left">
				<image :src="`../../static/imgs/avatar.png`" class="logo"></image>
				<image :src="`../../static/imgs/lv${lv?lv:'0'}.png`" class="lv"></image>
			</view>
			<view class="right">
				<view class="name">{{nikename}}</view>
				<view class="infos"> 
				{{name}}
				<!-- <text>{{i18n.BaseNode}}</text> <text>v{{lv?lv:'0'}}{{i18n.Token}}</text> -->
				</view>
			</view>
		</view>
		<view class="desc">
			<view class="item">
				<image src="../../static/imgs/mine-top01.png"></image>
				<view class="num">{{b_total}}</view>
				<view class="txt">{{i18n.Investment}}<!-- 推荐人数 --></view>
			</view>
			<view class="item">
				<image src="../../static/imgs/mine-top02.png"></image>
				<view class="num">{{j_total}}</view>
				<view class="txt">{{i18n.Performance}}<!-- 激活令牌数 --></view>
			</view>
			<!-- <view class="item"> -->
				<!-- <image src="../../static/imgs/mine-top03.png"></image>
				<view class="num">22</view>
				<view class="txt">{{i18n.remaining_time}}</view> -->
			<!-- </view> -->
		</view>
		<view class="list">
			<view class="li" hover-class="hover-transform2"  @tap="pageto('/pages/bill/bilis')">
				<view class="left">
					<image src="../../static/imgs/mine-icon01.png"></image><text>{{i18n.bili}}</text>
				</view>
				<text class="iconfont icon-arrow-right"></text>
			</view>
			<view class="li" hover-class="hover-transform2"  @tap="pageto('/pages/team/team')">
				<view class="left">
					<image src="../../static/imgs/mine-icon04.png"></image><text>{{i18n.myteam}}</text>
				</view>
				<text class="iconfont icon-arrow-right"></text>
			</view>
			<view class="li" hover-class="hover-transform2" @tap="pageto('/pages/invite/invite')">
				<view class="left">
					<image src="../../static/imgs/mine-icon02.png"></image><text>{{i18n.polite}}</text>
				</view>
				<text class="iconfont icon-arrow-right"></text>
			</view>
	<!-- 		<view class="li" hover-class="hover-transform2" @tap="pageto('/pages/help/help')">
				<view class="left">
					<image src="../../static/imgs/mine-icon03.png"></image><text>{{i18n.help_center}}</text>
				</view>
				<text class="iconfont icon-arrow-right"></text>
			</view> -->


	<!-- 		<view class="li" hover-class="hover-transform2" @tap="pageto('/pages/service/services')">
				<view class="left">
					<image src="../../static/imgs/mine-icon06.png"></image><text>{{i18n.service}}</text>
				</view>
				<text class="iconfont icon-arrow-right"></text>
			</view> -->
			
			
			
			
		<!-- 	<view class="li" hover-class="hover-transform2" @tap="plusToUrl">
				<view class="left">
					<image src="../../static/imgs/mine-icon03.png"></image><text>Block Wallet 50问</text>
				</view>
				<text class="iconfont icon-arrow-right"></text>
			</view> -->
			
			  
			
			<view class="li" hover-class="hover-transform2" @tap="pageto('/pages/setting/setting')">
				<view class="left">
					<image src="../../static/imgs/mine-icon07.png"></image><text>{{i18n.setting}}</text>
				</view>
				<text class="iconfont icon-arrow-right"></text>
			</view>
		</view>
	</view>
</template>
<script>
	import UniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
	import Load from '../../components/common/load.vue';
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	export default {
		data() {
			return {
				showLoad:false,
				ponum:0,
				b_total:0,
				j_total:0,
				lv:'',
				nikename:'',
				name:'',
				email:'',
				infoObj:'',
				name:''
			}
		},
		computed: {
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType'
			]),
			i18n() {
				return this.$t("message")
			}
		},
		onShow() {
			this.getTeam();
			console.log(this.getLoginInfo);
			this.email = this.getLoginInfo.email;
			this.indexFunc()
			forceUpdate(this.getLangType);
		},
		methods: {
			plusToUrl(){
				uni.navigateTo({
					url:'/pages/mine/question'
				})
				return
				// #ifdef APP-PLUS
					plus.runtime.openWeb('https://mp.weixin.qq.com/s/dZJdQZN8oY5awCFLOYPKEQ');
				// #endif
			},
			getTeam(){
				let _data = {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token
				}
				let url =this.getRequestUrl + '/api/User/team'
				this.showLoadings = true;
				fetch(url, _data, 'POST')
					.then(res=>{
						if(res.data.code){
							this.b_total = res.data.data.freeze
							this.j_total = res.data.data.yeji
						}
					})
					.catch(err=>{
						
					})
			},
			indexFunc(){
				let url = this.getRequestUrl + '/api/index/index';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token
				}
				this.showLoad = true;
				fetch(url,data,'POST').then(res=>{
					this.showLoad = false;
					if(res.data.code == 1){
						this.infoObj = JSON.stringify(res.data.data);
						this.nikename = res.data.data.username;
						this.name = res.data.data.name; 
						this.lv = parseFloat(res.data.data.lv)? res.data.data.lv+'':''
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}
				}).catch(err=>{
					this.showLoad = true;
				})
			},
			pageto(str){
				console.log(str)
				pageto(str)
			}
		},
		components: {
			UniStatusBar,Load
		}
	}
</script>

<style lang="scss">
	@import "@/common/scss/global.scss";
	@import "@/common/scss/variable.scss";

	.app-mine {
		color: #FFFFFF;

		.top {
			width: 750upx;
			height: 353upx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 100upx 30upx;
			display: flex;
			flex-direction: row;
			.top-left{
				position: relative;
				width: 120upx;
				height: 120upx;
				.logo {
					width: 120upx;
					height: 120upx;
					border-radius: 120upx;
					flex-shrink: 0;
					background-color: #FFFFFF;
					border: 4upx solid rgba($color: #ffffff, $alpha: 0.6);
				}
				.lv{
					width: 58upx;
					height: 34upx;
					flex-shrink: 0;
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 4;
				}
			}
			.right {
				margin-left: 30upx;
				height: 128upx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.name {
					font-size: 15px;
					font-weight: bold;
				}

				.infos {
					font-size: 11px;
					margin-top: 22upx;
					padding: 8upx 16upx;
					border-radius:50upx;
					background-color: #1f83ff;
					text-align: center;
				}

				text+text {
					margin-left: 40upx;
				}
			}
		}
	
		.desc {
			display: flex;
			padding: 0 30upx;
			margin-top: -90upx;
			color: #000000;
			.item {
				background-color: #FFFFFF;
				border-radius: 20upx;
				text-align: right;
				padding: 12upx 20upx 36upx;
				width: 240upx;
				box-shadow: 0 3px  12px rgba($color: #67B0F0, $alpha: .3);
				.num {
					text-align: left;
					font-size: 32upx;
					font-weight: bold;
				}
				.txt {
					text-align: left;
					font-size: 11px;
					color: #5D5D5D;
					margin-top: 20upx;
				}
				image {
					width: 44upx;
					height: 60upx;
				}
				&+.item {
					margin-left: 50upx;
				}
			}
		}
	
		.list {
			padding: 40upx 30upx;
			.li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 82upx;
				.left {
					display: flex;
					align-items: center;
					image {
						width: 46upx;
						height: 50upx;
						margin-right: 16upx;
					}
					image + text {
						font-size: 13px;
						color: #000000;
					}
				}
				.iconfont {
					font-size: 14px;
					color: #a7b6c2;
				}
			}
		}
	}